import React, { useState, useEffect } from 'react';
import { useSnakeGame } from './hooks/useSnakeGame';
import { useAIThoughts } from './hooks/useAIThoughts';
import { SnakeGame } from './components/SnakeGame';
import { AIThoughtsPanel } from './components/AIThoughtsPanel';
import { CharacterSelector } from './components/CharacterSelector';
import { PromptEditor } from './components/PromptEditor';
import { defaultCharacters } from './data/characters';
import { AICharacter } from './types';
import { Brain } from 'lucide-react';

function App() {
  const [characters, setCharacters] = useState<AICharacter[]>(defaultCharacters);
  const [selectedCharacter, setSelectedCharacter] = useState<AICharacter>(characters[0]);
  const [showPromptEditor, setShowPromptEditor] = useState(false);
  
  const {
    gameState,
    moveSnake,
    changeDirection,
    startGame,
    pauseGame,
    resumeGame,
    GRID_SIZE
  } = useSnakeGame();

  const { thoughts } = useAIThoughts(selectedCharacter, gameState);

  // Game loop
  useEffect(() => {
    if (!gameState.isPlaying || gameState.gameOver) return;

    const gameLoop = setInterval(() => {
      moveSnake();
    }, 200);

    return () => clearInterval(gameLoop);
  }, [gameState.isPlaying, gameState.gameOver, moveSnake]);

  const handleCharacterSave = (updatedCharacter: AICharacter) => {
    setCharacters(prev => 
      prev.map(char => char.id === updatedCharacter.id ? updatedCharacter : char)
    );
    setSelectedCharacter(updatedCharacter);
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 via-purple-900 to-gray-900">
      {/* Header */}
      <header className="bg-black/50 backdrop-blur-sm border-b border-gray-800 p-4">
        <div className="max-w-7xl mx-auto flex items-center justify-between">
          <div className="flex items-center gap-3">
            <Brain className="text-purple-400" size={32} />
            <div>
              <h1 className="text-2xl font-bold text-white">AI Snake Lab</h1>
              <p className="text-sm text-gray-400">Watch AI consciousness emerge through gameplay</p>
            </div>
          </div>
        </div>
      </header>

      {/* Main Content */}
      <main className="max-w-7xl mx-auto p-6">
        <div className="grid lg:grid-cols-2 gap-6 h-[calc(100vh-160px)]">
          {/* Left Panel - Game */}
          <div className="space-y-4">
            <SnakeGame
              gameState={gameState}
              onDirectionChange={changeDirection}
              onStart={startGame}
              onPause={pauseGame}
              onResume={resumeGame}
              gridSize={GRID_SIZE}
            />
            <CharacterSelector
              characters={characters}
              selectedCharacter={selectedCharacter}
              onSelect={setSelectedCharacter}
            />
          </div>

          {/* Right Panel - AI Thoughts */}
          <AIThoughtsPanel
            character={selectedCharacter}
            thoughts={thoughts}
            onCharacterChange={setSelectedCharacter}
            onEditPrompts={() => setShowPromptEditor(true)}
          />
        </div>
      </main>

      {/* Prompt Editor Modal */}
      {showPromptEditor && (
        <PromptEditor
          character={selectedCharacter}
          onSave={handleCharacterSave}
          onClose={() => setShowPromptEditor(false)}
        />
      )}
    </div>
  );
}

export default App;